<template>
  <div class="nav-header" id="nav-header">
    <div class="header-logo">
      <img src="../assets/images/logo.png"/>
    </div>
    <ul class="header-list">

      <li :class="{select:item.name == $route.matched[0].name}" v-for="(item,index) in list"
          @click="handleSelectClick(index)">

        <svg class="icon" aria-hidden="true">
          <use :xlink:href="item.icon"></use>
        </svg>
        <span>{{item.title}}</span>
      </li>

    </ul>
    <div class="user-header">
      <img :src="userData.avatarUrl" v-if="userData.avatarUrl"/>
      <img src="../assets/images/default1.png" v-else/>

      <span>{{userData.nickname}}</span>


      <!-- <el-popover
         popper-class="self-popover"
         placement="bottom"
         width="200"
         trigger="click">
         <ul>
           <li class="list" @click="goFix">修改密码</li>
           <li class="list" @click="outLogin">退出账号</li>
         </ul>
         <svg class="icon" slot="reference" aria-hidden="true" @click="handleSettingClick">
           <use xlink:href="#icon-settings"></use>
         </svg>

       </el-popover>-->

      <svg class="icon" aria-hidden="true" @click="handleSettingClick" id="showSetting">
        <use xlink:href="#icon-settings"></use>
      </svg>

      <div class="tag-box" style="display: none">
        <ul>
          <li class="list" @click="goFix">修改密码</li>
          <li class="list" @click="outLogin">退出账号</li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
  import util from '../lib/util'
  import {SUCCESS_CODE, USER_NOT_LOGIN_CODE} from '../lib/returnCode'
  import {mapState, mapActions} from 'vuex';

  export default {
    name: 'NavHeader',
    data() {
      return {
        list: [
          {title: '写文章', path: '/Article', name: 'Article', icon: '#icon-file'},
          {title: '素材中心', path: '/Material/SendArticle', name: 'Material', icon: '#icon-image'},
          {title: '发布管理', path: '/Release/ReleaseManage', name: 'Release', icon: '#icon-grid'},
          {title: '数据统计', path: '/DataStatistic', name: 'DataStatistic', icon: '#icon-pie-chart'}],
        indexNum: 0,
        settingsNum: false,

        userData: {}
      };
    },

    created: function () {
      util.ajax.get('getUserInfo').then((res) => {
        this.userData = res.data || {};

        this.haddleSetPreviewInfo(this.userData)
      })

    },
    methods: {
      ...mapActions([
        'haddleSetPreviewInfo'
      ]),
      handleSettingClick() {

        let box = document.querySelector('.tag-box');
        if (box.style.display == 'none') {
          box.style.display = 'block';
        } else {
          box.style.display = 'none';
        }


        //this.settingsNum = !this.settingsNum

      },

      handleSelectClick(index) {


        this.$router.push({path: this.list[index].path})

      },

      outLogin: function () {
        util.ajax.get('logout').then((res) => {

          if (res.code == SUCCESS_CODE) {
            //退出之后清理vuex中的数据,会导致记住密码失效
//            window.localStorage.clear();
//            window.sessionStorage.clear();
            this.$router.push({path: '/'});
          }
        })
      },
      goFix() {
        this.$router.push({path: '/FixPassword'});
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/style.scss";

  .nav-header {
    width: 100%;
    min-width: 950px;
    background: $bodyBgColor;
    overflow: hidden;
    border-bottom: 3px solid $borderColor;
    .header-logo {
      float: left;
      width: 220px;
      line-height: 80px;
      font-size: $fs24;
      color: #fff;
      border-right: 1px solid $headerborderColor;
      text-align: center;
      img {
        position: relative;
        top: -3px;
        width: 160px;
        height: 44px;
      }
    }
    .header-list {
      float: left;
      li {
        position: relative;
        float: left;
        width: 120px;
        line-height: 80px;
        border-right: 1px solid $headerborderColor;
        font-size: $fs12;
        color: $vfTitleColor;
        text-align: center;
        cursor: pointer;
        .icon {
          position: relative;
          top: 2px;
          width: 20px;
          height: 20px;
        }
        span {
          line-height: 20px;
        }
      }
      .select {
        color: $colorWhite;
        &:after {
          position: absolute;
          bottom: 0px;
          left: 50%;
          margin-left: -4px;
          content: '';
          width: 0;
          height: 0;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-bottom: 4px solid $borderColor;
        }
      }
    }
    .user-header {
      float: right;
      margin-right: 20px;
      line-height: 80px;
      color: #fff;
      font-size: $fs14;
      img {
        width: 32px;
        height: 32px;
        margin-right: 10px;
        border-radius: 50%;
      }
      .icon {
        margin-left: 20px;
        color: $vfTitleColor;
      }
      .tag-box {
        position: absolute;
        top: 65px;
        right: 5px;
        z-index: 99;
        text-align: center;
        background: #fff;
        font-size: $fs16;
        border: 1px solid $listborderColor;
        border-radius: 10px;
        color: $vfConcentColor;
        &:after,
        &:before {
          border: solid transparent;
          content: ' ';
          height: 0;
          bottom: 100%;
          position: absolute;
          width: 0;
        }
        &:after {
          border-width: 6px;
          border-bottom-color: #fff;
          left: 80px;
        }
        &:before {
          border-width: 8px;
          border-bottom-color: $listborderColor;
          left: 78px;
        }
        ul {
          .list {
            line-height: 40px;
            width: 106px;
            color: $vfConcentColor;
            font-size: $fs14;
            border-bottom: 1px solid $listborderColor;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
